<style scoped lang="scss">
.banner {
  overflow: hidden;

  img {
    float: left;
    width: 100%;
  }
}

.service {
  border-bottom: 1px solid #333;
}

.services,
.advantage {
  li {
    width: 180px;
  }

  li + li {
    margin-left: 120px;
  }

  img {
    height: 100px;
  }
}

.resolve {
  background-color: #ebebeb;
}

.advantage {
  h4 {
    color: #dd1c1c;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  transform: translateY(-100%);
}
</style>
<template>
  <div class="container">
    <default-header></default-header>
    <div class="banner">
      <img
        v-for="data in banner.data"
        :key="data.id"
        :src="data.thumb"
        :alt="data.name"
      />
    </div>
    <!---->
    <div class="service width1080 margin0auto pt30 pb30">
      <h2 class="tac">我们的服务</h2>
      <p class="tac color_666 mt10">形象策略+画册策划+网站设计+小程序建设</p>
    </div>
    <!---->
    <div class="services width1080 margin0auto pt60 pb60">
      <ul class="oh">
        <li v-for="data in services" :key="data.name" class="fl tac">
          <div class="icon">
            <img :src="data.icon" :alt="data.name" />
          </div>
          <h3 class="mt10">{{ data.name }}</h3>
          <p class="mt5">{{ data.desc }}</p>
        </li>
      </ul>
    </div>
    <div class="resolve pt40 pb40">
      <h1 class="tac">我们提供定制化设计解决方案</h1>
      <p class="tac color_666 mt10">
        <span v-for="(item, index) in resolves" :key="index">
          {{ index > 0 ? "+" : "" }}{{ item.name }}
        </span>
      </p>
      <ul class="width1080 margin0auto bg_fff pt10 pb10 pl10 pr10 mt30 oh">
        <a
          v-for="(data, idx) in resolves"
          :key="data.name"
          :class="[data.class_name]"
          class="fl oh pointer"
          style="position: relative;display: block"
          :href="'/home/news?cate_id=' + data.id"
          @mouseenter="mouseenter(idx)"
          @mouseleave="mouseleave"
        >
          <img
            :src="data.thumb"
            alt=""
            :style="data.style"
            class="fl"
            style="height: 200px"
          />
          <transition name="fade">
            <div
              v-if="currResolve === idx"
              class="color_fff fs20 tac"
              style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(221,28,28,.8)"
              :style="{ lineHeight: data.style.height || '200px' }"
            >
              {{ data.name }}
            </div>
          </transition>
        </a>
      </ul>
    </div>
    <div class="pt40 pb40">
      <h1 class="tac">我们的优势</h1>
      <p class="tac color_666 mt10">专业团队+过硬品质</p>
      <ul class="advantage width1080 margin0auto oh">
        <li v-for="(data, idx) in advantage" :key="idx" class="tac fl">
          <div class="thumb pt50 pb50">
            <img :src="data.icon" alt="" />
          </div>
          <h4 class="fs50">{{ data.total }}</h4>
          <p class="mt10 color_666">{{ data.name }}</p>
        </li>
      </ul>
    </div>

    <div class="pt40 pb40">
      <p class="width1080 margin0auto pb5">友情链接:</p>
      <ul class="width1080 margin0auto oh">
        <li v-for="(data, idx) in flinks.data" :key="idx" class="fl mr10 pb10">
          <a :href="data.url" class="fs14">{{ data.name }}</a>
        </li>
      </ul>
    </div>

    <default-footer></default-footer>
  </div>
</template>

<script>
import DefaultHeader from "../components/default-header";
import DefaultFooter from "../components/default-footer";

export default {
  components: { DefaultFooter, DefaultHeader },
  mixins: [],
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content:
            (this.baseConfig &&
              this.baseConfig.WEB_KEYWORDS &&
              this.baseConfig.WEB_KEYWORDS.value) ||
            ""
        },
        {
          hid: "description",
          name: "description",
          content:
            (this.baseConfig &&
              this.baseConfig.WEB_DESCRIPTION &&
              this.baseConfig.WEB_DESCRIPTION.value) ||
            ""
        }
      ]
    };
  },
  data() {
    return {
      banner: {},
      services: [
        {
          name: "小程序",
          desc: "微信+支付宝+百度",
          icon: require("../assets/img/home/index/icon_mobile.png")
        },
        {
          name: "网站建设",
          desc: "SEO友好",
          icon: require("../assets/img/home/index/icon_member.png")
        },
        {
          name: "画册策划",
          desc: "创意无限",
          icon: require("../assets/img/home/index/icon_us.png")
        },
        {
          name: "形象策略",
          desc: "光彩照人",
          icon: require("../assets/img/home/index/icon_address.png")
        }
      ],
      currResolve: -1,
      advantage: [
        {
          name: "成功案例",
          total: "100+",
          icon: require("../assets/img/home/index/icon_xiangji.png")
        },
        {
          name: "团队成员",
          total: "200+",
          icon: require("../assets/img/home/index/icon_women.png")
        },
        {
          name: "客户好评",
          total: "500+",
          icon: require("../assets/img/home/index/icon_zan.png")
        },
        {
          name: "获得奖项",
          total: "200+",
          icon: require("../assets/img/home/index/icon_jiangbei.png")
        }
      ]
    };
  },
  async asyncData({ app, store }) {
    // 网站名称
    const config = await app.$configService.detail({ key: "WEB_NAME" });
    // 解决方案
    const fa = await app.$cateService.list({ fid: 192 });
    const flinks = await app.$flinkService.list({});
    const baseConfig = store.state.baseConfig;
    return {
      baseConfig,
      flinks,
      title: config.value,
      resolves:
        (fa.data &&
          fa.data.map(r => {
            return { ...r, style: JSON.parse(r.style) };
          })) ||
        []
    };
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    mouseenter(idx) {
      this.currResolve = idx;
    },
    mouseleave() {
      this.currResolve = -1;
    },
    async getBanner() {
      this.banner = await this.$bannerService.list({});
    }
  }
};
</script>
